上回我們完成創建專案以及導入Tailwind CSS，但是並沒有接觸到Instagram的部分，這一回我們會嘗試進行Instagram的首頁版面設定。

首先，我們到src/main.jsx，在開頭的部分添加

import { BrowserRouter } from "react-router-dom"

接著找到這個區塊：

<React.StrictMode>
	<App />
</React.StrictMode>,

修改成以下這樣

  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,

儲存後，啟動專案

npm run dev

看起來和之前一模一樣，顯示有底線的Hello world!，代表成功導入react-router-dom了。

react-router-dom用來實現路由功能，我們完成側邊欄後就會需要透過路由功能導向我們要去的網頁，假設側邊欄上有個人資料的按鈕按下後會導向localhost/profile，路由會幫我們處理後顯示對應的內容，如果沒有路由我們就只能看一開始的網頁。

接下來我們需要創建一些資料夾和檔案。

在src下，新增Components和Pages資料夾。
在Components下，新增Sidebar資料夾。
在Sidebar下，新增Sidebar.css和Sidebar.jsx。

Sidebar.jsx寫入以下程式碼：

import React from 'react'

const Sidebar = () => {
  return (
    <div>Sidebar</div>
  )
}

export default Sidebar

在Pages下，新增Router跟HomePage資料夾。

在HomePage下，新增HomePage.jsx。

HomePage.jsx的內容如下：

import React from 'react'

const HomePage = () => {
  return (
    <div>HomePage</div>
  )
}

export default HomePage

我們創建了許多的檔案，可能令人一頭霧水，不清楚它們的作用，現在來解釋一下。

• Components資料夾：存放用來構成Pages內容的零件，雖然可以也全都寫在一個Pages的檔案裡，但是拆成多個零件比較容易維護和debug。
• Sidebar資料夾：存放側邊欄的程式碼和CSS。
• Sidebar.css：側邊欄的CSS。
• Sidebar.jsx： 實現側邊欄的程式碼。
• Pages資料夾：存放Instagram的各種頁面，目前只有首頁(HomePage)。
• HomePage資料夾：存放首頁程式碼的資料夾。
• Router資料夾：存放路由設定程式碼的資料夾。
• HomePage.jsx： 首頁的程式碼。

在Router下，新增Router.jsx，用來路由設定以及控制顯示的內容。

Router.jsx的程式碼如下：

import React from 'react'
import Sidebar from "../../Components/Sidebar/Sidebar"
import { Route, Routes } from "react-router-dom"
import HomePage from "../HomePage/HomePage"

const Router = () => {
  return (
    <div>
      <div className="flex">
        <div>
          <Sidebar />
        </div>
        <div>
          <Routes>
            <Route path="/" element={<HomePage />} />
          </Routes>
        </div>
      </div>
    </div>
  )
}

export default Router

代表顯示Sidebar.jsx中的內容

<Route path="/" element={} /> 代表瀏覽【http://localhost:5173/ 】時，會顯示HomePage的內容。

修改App.js顯示Router的內容，修改後的結果如下：

import './App.css';
import Router from "./Pages/Router/Router";

function App() {
  return (
    <div className="App">
      <Router />
    </div>
  );
}

export default App;

打開瀏覽器進入【http://localhost:5173/ 】，可以看到以下的畫面。